<template>
  <div class="rateQuery">
    <div v-if="feeTypeName" style="margin-left:5vw">
      <h3 style="font-size: 14px;">
        模板类型：{{ feeTypeName }}
        <span style="margin-left:30%">模板名称：{{ feename }}</span>
      </h3>
    </div>
    <div style="width: 90%;margin:20px auto;">
      <a-table
        :columns="columns"
        :dataSource="ratelist"
        :rowClassName="rowClassName"
        :rowKey="record => record.id"
        :pagination="false"
      >
        <div slot="feeTemplate" slot-scope="record">
          <div v-if="record.protocolBankDTOList != null">按类分布</div>
          <div v-if="record.name != 'D0'">
            <div
              v-if="
                record.protocolBankDTOList == null ||
                  record.templateBankDTOList.length == 0
              "
            >
              {{ record.feeTemplate | feeTemplate }}
            </div>
          </div>
          <div v-if="record.name == 'D0'">
            <span
              >D0垫资:{{
                (Math.round(record.feeTemplate.rate * 1000000) / 10000).toFixed(
                  4
                )
              }}%</span
            >
            <br />
            <span>D0单笔:{{ record.feeTemplate.amount / 100 }}元/笔</span>
          </div>
        </div>
        <div slot="status" slot-scope="record">
          <div v-if="record.open == true">开启</div>
          <div v-if="record.open == false">关闭</div>
        </div>
        <div
          v-if="record.templateBankDTOList.length > 0"
          slot="expandedRowRender"
          slot-scope="record"
          style="margin: 0"
        >
          <a-table
            :columns="columns2"
            :dataSource="record.templateBankDTOList"
            :rowKey="record => record.id"
            :pagination="false"
            size="small"
          >
            <div slot="cardType" slot-scope="record">
              <span v-if="record.cardType == 'D'">借记卡</span>
              <span v-if="record.cardType == 'C'">贷记卡</span>
            </div>
            <div slot="feeTemplate" slot-scope="record">
              {{ record.feeTemplate | feeTemplate }}
            </div>
            <div slot="transAmountTop" slot-scope="record">
              <div v-if="record.transAmountTop == 0">\</div>
              <div v-if="record.transAmountTop != 0">
                {{ record.transAmountTop | cashfilter }}元封顶
              </div>
            </div>
          </a-table>
        </div>
        <!-- <template slot='expandIcon' slot-scope="props">
      <a-icon slot='expandIcon' slot-scope="props" type="down-circle" />
        </template>-->
      </a-table>
    </div>
    <div style="width: 90%;margin:20px auto;">
      是否为默认模板：
      <span v-if="defaultValue">是</span>
      <span v-if="!defaultValue">否</span>
    </div>
    <div style="text-align:center;margin: 20px 0;">
      <a-button type="primary" style="width: 8vw;" @click="goModify">
        <span>修改</span>
        <!-- <span v-if="isChange == false">审核中</span> -->
      </a-button>
      <a-button
        type="primary"
        style="width: 8vw;margin-left:10px"
        @click="delrate"
      >
        <span>删除</span>
      </a-button>
    </div>

    <a-modal title="信息变更手机短信验证！" v-model="visible" :footer="null">
      <a-form @submit="orgSubmit" :form="form" style="margin:0 auto;">
        <a-form-item v-bind="formItemLayout" label="手机号码">
          <div style="display: flex;align-items: center;">
            <a-hide-data
              :params="{ type: 'mobileNo', value: this.query.mobileNo }"
            ></a-hide-data
            >&nbsp;&nbsp;
            <a-button
              style="margin-left: 20px;"
              v-if="issend"
              @click="getCode"
              :loading="iconLoading"
              >发送验证码</a-button
            >
            <a-button
              style="margin-left: 20px;"
              v-if="!issend"
              disabled
              type="primary"
              >{{ count }}s后发送</a-button
            >
          </div>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="验证码">
          <a-input
            v-model="query.verCode"
            name="captcha"
            placeholder="请输入验证码"
          />
        </a-form-item>
        <div style="text-align:center;">
          <a-button style="width: 5vw;" htmlType="submit" type="primary"
            >确定</a-button
          >
        </div>
      </a-form>
    </a-modal>
    <a-modal title="删除模板" v-model="delvisible" :footer="null">
      <div>确认删除{{ feename }}模板？</div>
      <div style="text-align:center;margin: 20px 0;">
        <a-button type="primary" style="width: 8vw;" @click="delok">
          <span>确认</span>
          <!-- <span v-if="isChange == false">审核中</span> -->
        </a-button>
        <a-button
          type="primary"
          style="width: 8vw;margin-left:10px"
          @click="delpass"
        >
          <span>取消</span>
        </a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import AHideData from "../../common/HideData";
import api from "@/common/api";
const columns = [
  { title: "功能名称", dataIndex: "name" },
  { title: "费率", scopedSlots: { customRender: "feeTemplate" } }
  // { title: "当前状态",scopedSlots: { customRender: "status" }}
];
const columns2 = [
  { title: "发卡行", dataIndex: "bankName" },
  { title: "卡类型", scopedSlots: { customRender: "cardType" } },
  { title: "费率", scopedSlots: { customRender: "feeTemplate" } },
  { title: "备注", scopedSlots: { customRender: "transAmountTop" } }
];

export default {
  components: {
    AHideData
  },
  data() {
    return {
      ratelist: [],
      templateBankDTOList: [],
      columns,
      columns2,
      query: {},
      queryid: "",
      feeTypeName: "",
      feename: "",
      defaultValue: Boolean,
      visible: false,
      delvisible: false,
      iconLoading: false,
      issend: true,
      isChange: true,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
          md: { span: 16 }
        }
      }
    };
  },
  mounted() {},
  activated() {
    this.queryid = this.$route.params.id;
    // this.feeTypeName = this.$route.params.feeTypeName;
    // this.feename = this.$route.params.name;
    this.getratelist();
  },
  filters: {
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2);
      // return Number(value).toFixed(2)
    },
    feeTemplate(value) {
      if (value.amount == null) {
        if (value.top) {
          return (
            (Math.round(value.rate * 1000000) / 10000).toFixed(4) +
            "%，封顶" +
            value.top / 100 +
            "元"
          );
        } else {
          return (Math.round(value.rate * 1000000) / 10000).toFixed(4) + "%";
        }
      } else {
        return value.amount / 100 + "元/笔";
      }
    }
  },
  methods: {
    rowClassName(record, index) {
      if (
        record.templateBankDTOList == null ||
        record.templateBankDTOList.length == 0
      ) {
        return "noExpand";
      }
    },
    getratelist() {
      this.$axios.get("/agent/fee/group/getById/" + this.queryid).then(res => {
        console.log("rate", res);
        if (res.data.code == "OK") {
          // this.isChange = res.data.data.isChange
          this.ratelist = res.data.data.feeTemplateDTOList;
          this.defaultValue = res.data.data.defaultValue;
          // 从接口处获取名称
            this.feeTypeName = res.data.data.feeTypeName;
            this.feename = res.data.data.name;


          for (let idx in this.ratelist) {
            this.ratelist[idx].feeTemplate = JSON.parse(
              this.ratelist[idx].feeTemplate
            );
            this.ratelist[idx].maxFee = JSON.parse(this.ratelist[idx].maxFee);
            this.ratelist[idx].minFee = JSON.parse(this.ratelist[idx].minFee);
            if (this.ratelist[idx].templateBankDTOList != null) {
              for (let idx2 in this.ratelist[idx].templateBankDTOList) {
                this.ratelist[idx].templateBankDTOList[
                  idx2
                ].feeTemplate = JSON.parse(
                  this.ratelist[idx].templateBankDTOList[idx2].feeTemplate
                );
                this.ratelist[idx].templateBankDTOList[
                  idx2
                ].maxFee = JSON.parse(
                  this.ratelist[idx].templateBankDTOList[idx2].maxFee
                );
                this.ratelist[idx].templateBankDTOList[
                  idx2
                ].minFee = JSON.parse(
                  this.ratelist[idx].templateBankDTOList[idx2].minFee
                );
              }
            }
          }
          // this.protocolBankDTOList = this.ratelist.protocolBankDTOList
          // this.ratelist.forEach(r => {
          //     this.protocolBankDTOList = r.protocolBankDTOList
          // })
          // for (let idx2 in this.ratelist) {
          //     if(this.ratelist[idx2].protocolBankDTOList == null){
          //         this.protocolBankDTOList[idx2] = null
          //     }else{
          //         this.protocolBankDTOList[idx2] = this.ratelist[idx2].protocolBankDTOList
          //     }

          // }

          console.log("this.ratelist", this.ratelist);
          // this.spinning = false;
        } else {
          // this.spinning=false;
        }
      });
    },
    goModify() {
      // this.query.verCode = null;
      // this.query.mobileNo = localStorage.getItem("mobileNo");
      // console.log(this.query);
      // this.visible = true;

      // this.$router.push({
      //   name: "合作机构费率修改",
      //   params: {
      //     id: this.queryid ,
      //     feeTypeName:this.feeTypeName,
      //     name:this.feename
      //   }
      // });
      this.$router.push(
        `/org/transmanage/orgratequerychange/${this.queryid}`
      );
    },
    delrate() {
      this.delvisible = true;
    },
    delok() {
      this.$axios
        .get("/agent/fee/group/deleteById/" + this.queryid)
        .then(res => {
          if (res.data.code == "OK") {
            this.delvisible = false;
            this.$router.push("/org/transmanage/rateTemplate");
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    delpass() {
      this.delvisible = false;
    },
    orgSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$axios
            .post("/agent/merchant/account/send/mobile/check", this.query)
            .then(res => {
              console.log("sendmobile", res);
              if (res.data.code == "OK") {
                this.visible = false;
                this.$router.push("/org/transmanage/ratequerychange");
              } else {
                this.$message.warning(res.data.message);
              }
            });
        }
      });
    },
    getCode() {
      this.iconLoading = true;

      this.$axios
        .post("/agent/merchant/account/send/mobile/check", {
          mobileNo: this.query.mobileNo
        })
        .then(
          res => {
            this.iconLoading = false;
            // console.log("code",res)
            if (res.data.code == "OK") {
              const TIME_COUNT = 60;
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.issend = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.issend = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                }, 1000);
              }
            } else {
              this.$message.warning(res.data.message);
              this.issend = true;
            }
            // this.$message.warning(res.message);
          },
          err => {
            this.iconLoading = false;
            console.log(err);
          }
        );
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.noExpand {
  .ant-table-row-expand-icon {
    display: none;
  }
}
.rateQuery {
  overflow: scroll;
  height: 100%;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
}
/*滚动条样式*/
.rateQuery::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

.rateQuery::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.rateQuery::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
